import React, { Component } from 'react'
import { connect } from 'react-redux'
import { createContainer } from 'utils/hoc'
import ContentBox from 'components/contentBox'
import { Tree, Button, Modal, Form, Input, Radio } from 'antd'
import PropTypes from 'prop-types'
// import Filters from 'components/common/filters'
// import CustomTable from 'components/common/table'
// import { widgetType, PAGE_SIZE } from 'constants'
import Style from './settings.css'

const { TreeNode } = Tree
const { Item } = Form
const RadioGroup = Radio.Group

class settings extends Component {
  static propTypes = {
    getAuthTree: PropTypes.func,
    authTree: PropTypes.array,
    form: PropTypes.any,
    addOrUpdateAuth: PropTypes.func
  }
  constructor (props) {
    super(props)
    this.state = {
      showModal: false,
      isEdit: false,
      current: {}
    }
  }

  componentDidMount () {
    this.props.getAuthTree()
  }

  addAuth = item => {
    this.setState({
      current: item,
      showModal: true
    })
  }

  editAuth = item => {
    this.setState({
      current: item,
      showModal: true,
      isEdit: true
    })
  }

  submit = () => {
    let params
    const { current } = this.state
    const { form, addOrUpdateAuth, getAuthTree } = this.props
    form.validateFields((err, values) => {
      if (!err) {
        if (this.isEdit) {
          params = {
            menuId: current.menuId,
            module: 0,
            ...values
          }
        } else {
          params = {
            parentId: current.menuId,
            module: 0,
            ...values
          }
        }
        addOrUpdateAuth(params).then(() => {
          form.resetFields()
          this.cancel()
          getAuthTree()
        })
      }
    })
  }

  cancel = () => {
    this.setState({
      showModal: false,
      isEdit: false,
      current: {}
    })
  }

  renderModal = () => {
    const { current, isEdit } = this.state
    const { form: { getFieldDecorator } } = this.props

    return (
      <Form>
        <Item label='名称'>
          {getFieldDecorator('name', {
            ruels: [{ required: true, message: '必填' }],
            initialValue: isEdit ? current.menuName : ''
          })(<Input />)}
        </Item>
        <Item label='编码'>
          {getFieldDecorator('code', {
            ruels: [{ required: true, message: '必填' }],
            initialValue: isEdit ? current.menuCode : ''
          })(<Input />)}
        </Item>
        <Item>
          {getFieldDecorator('type', {
            rules: [{ required: true, message: '必填' }],
            initialValue: current.menuType
          })(
            <RadioGroup>
              <Radio value={0}>菜单</Radio>
              <Radio value={1}>按钮</Radio>
            </RadioGroup>
          )}
        </Item>
      </Form>
    )
  }

  render () {
    const { showModal } = this.state
    const { authTree = [] } = this.props
    const loop = data =>
      data.map(item => {
        const title = (
          <div className={Style['title-wrap']}>
            <div>{`${item.menuName}`}</div>
            <div style={{ marginLeft: 32 }}>编码:{item.menuCode}</div>
            <div style={{ marginLeft: 24 }}>
              <Button size='small' type='link' onClick={() => this.addAuth(item)}>新增下级</Button>
              <Button size='small' type='link' onClick={() => this.editAuth(item)}>编辑</Button>
            </div>
          </div>
        )
        if (item.childLinkList && item.childLinkList.length) {
          return (
            <TreeNode key={item.menuId} title={title} code={item.menuCode}>
              {loop(item.childLinkList)}
            </TreeNode>
          )
        }
        return <TreeNode key={item.menuId} title={title} code={item.menuCode} />
      })
    return (
      <>
        <ContentBox>
          <div className={Style['content']}>
            {/* {isSelected && <div className={Style['btns']}>
              <Button size='small' type="primary" onClick={this.addAuth}>新增下级</Button>
              <Button size='small' type="primary" onClick={this.editAuth}>编辑</Button>
            </div>} */}
            <Tree
              selectable={false}
              defaultExpandAll
            >
              {loop(authTree)}
            </Tree>
          </div>
          <Modal
            title='权限'
            visible={showModal}
            onOk={this.submit}
            onCancel={this.cancel}
          >
            {this.renderModal()}
          </Modal>
        </ContentBox>
      </>
    )
  }
}

const mapState = state => ({
  authTree: state.setup.authTree
})
const mapDispatch = dispatch => ({
  login: dispatch.common.createLogin,
  getAuthTree: dispatch.setup.getAuthTree,
  addOrUpdateAuth: dispatch.setup.addOrUpdateAuth
})

export default createContainer(
  connect(
    mapState,
    mapDispatch
  )(Form.create()(settings))
)
